.no-data {text-align: center; padding: .75em; color: #666}

@keyframes loading-rotate {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.smart-loading {
  width: 40px; height: 40px; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  & > ul {
    width: 20%; height: 10%;
    position: relative;
    animation: loading-rotate 1s steps(12) infinite;
    & > li {
      width: 100%; height: 100%;
      border-radius: 50%;
      position: absolute; left: 0; top: 0;
      background: rgba(0, 0, 0, .2);
    }
  }
}

.sys-dialog {
  width: 100%; height: 100%;
  position: fixed; left: 0; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 0 2em;
  background: rgba(0, 0, 0, .5);
  & > .inner {
    min-width: 300px;
    border-radius: 4px;
    box-shadow: 0 0 2em rgba(0, 0, 0, .5);
    background: #fff;

    .sys-dialog-msg {
      min-height: 4em;
      padding: 1em 1em;
      max-height: calc(100vh - 300px);
    }
    .sys-dialog-ctrl {
      border-top: 1px solid #eee;
      padding: .75em 1em;
      display: flex; justify-content: right;
      & > .btn + .btn {margin-left: 1em;}
    }
  }
}
